﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>空间参考系统测试</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
    <style>
        html, body, #main {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map, topo, streetMap, usa, taxParcel;

        require(["dojo/parser", "dijit/registry", "esri/geometry/Extent",
            "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/form/Button",
            "dojo/domReady!"],
            function (parser, registry, Extent, Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer) {
                parser.parse();

                var initialExtent = new Extent({
                    "xmin": -9749695.83182828, "ymin": 4387485.423567985,
                    "xmax": -8230739.205745666, "ymax": 5374440.332785915,
                    "spatialReference": { "wkid": 102100 }
                });

                map = new esri.Map("mapDiv", { extent: initialExtent });
                
                registry.byId("addSameTiledLayer").on("click", addSameTiledLayer);
                registry.byId("addDifferentTiledLayer").on("click", addDifferentTiledLayer);
                registry.byId("addGeoDynamicLayer").on("click", addGeoDynamicLayer);
                registry.byId("addProjDynamicLayer").on("click", addProjDynamicLayer);

                map.on("layer-add", function (evt) {
                    var layer = evt.layer;
                    document.getElementById("spatialReference").innerHTML = "地图的空间参考系统为:" + map.spatialReference.wkid + ";<p>图层的空间参考系统为:" + layer.spatialReference.wkid + "</p>";
                });

                map.on("mouse-move", function (evt) {
                    document.getElementById("coords").innerHTML = "X: " + evt.mapPoint.x + " | Y: " + evt.mapPoint.y;
                });

                function addSameTiledLayer() {
                    map.removeAllLayers();
                    if (!topo) {
                        var topoUrl = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
                        topo = new ArcGISTiledMapServiceLayer(topoUrl);
                    }

                    map.addLayer(topo);
                }

                function addDifferentTiledLayer() {
                    map.removeAllLayers();
                    if (!streetMap) {
                        var streetMapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
                        streetMap = new esri.layers.ArcGISTiledMapServiceLayer(streetMapUrl);
                    }

                    map.addLayer(streetMap);
                }

                function addGeoDynamicLayer() {
                    map.removeAllLayers();
                    if (!usa) {
                        var usaUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer";
                        usa = new esri.layers.ArcGISDynamicMapServiceLayer(usaUrl);
                    }

                    map.addLayer(usa);
                }

                function addProjDynamicLayer() {
                    map.removeAllLayers();
                    if (!taxParcel) {
                        var taxParcelUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer";
                        taxParcel = new esri.layers.ArcGISDynamicMapServiceLayer(taxParcelUrl);
                    }

                    map.addLayer(taxParcel);
                }
        });
        
    </script>
</head>
<body class="soria">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  id="main">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"  style="height: 60px;">
            <h3>功能：空间参考系统测试</h3>            
        </div>
        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div id="coords" style="font-size:10pt; color:gray;">    </div>
        </div>
        <div id="spatialReference" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" style="width:200px; border:1px solid #000;"></div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true"
            style="height: 50px;">
            <button data-dojo-type="dijit/form/Button" id="addSameTiledLayer">增加相同坐标系统切片图层</button>
            <button data-dojo-type="dijit/form/Button" id="addDifferentTiledLayer">增加不同坐标系统切片图层</button>
            <button data-dojo-type="dijit/form/Button" id="addGeoDynamicLayer">增加不同地理坐标系统动态图层</button>
            <button data-dojo-type="dijit/form/Button" id="addProjDynamicLayer">增加不同投影坐标系统动态图层</button>
        </div>
    </div>

</body>
</html>